<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>档案管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="X-Frame-Options" content="DENY">
  <link rel="stylesheet" href="./lib/css/layui.css" media="all">
</head>

<body>
  <!-- 查询 -->
  <form class="layui-form layui-row" action="" lay-filter="tableFilter" style="width: 90%;">
    <div class="layui-col-xs3 layui-form-item ">
      <label class="layui-form-label">渠道:</label>
      <div class="layui-input-block">
        <input type="text" name="channel" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-col-xs3 layui-form-item ">
      <label class="layui-form-label">销售顾问:</label>
      <div class="layui-input-block">
        <input type="text" name="salesPerson" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-col-xs3 layui-form-item ">
      <label class="layui-form-label">会员编号:</label>
      <div class="layui-input-block">
        <input type="text" name="member_no" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item layui-col-xs3">
      <label class="layui-form-label">会员姓名:</label>
      <div class="layui-input-block">
        <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item layui-col-xs3">
      <label class="layui-form-label">会员状态:</label>
      <div class="layui-input-block">
        <select class="layui-select" name="member_status">
          <option value="">请选择</option>
          <option value="在训">在训</option>
          <option value="暂未入训">暂未入训</option>
          <option value="请假">请假</option>
          <option value="完训">完训</option>
        </select>
      
      </div>
    </div>
    <div class="layui-form-item layui-col-xs3">
      <div class="layui-input-block">
        <button lay-submit lay-filter="search" class="layui-btn layui-btn-normal">查询</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
  <!-- 表格 -->
  <table class="layui-hide" id="mainTable" lay-filter="mainTable"></table>
  <div>
    <!-- 编辑 -->
    <div id="editPage" style="width:700px;height: 270px;display: none;padding: 10px;">
      <form class="layui-form layui-row" action="" lay-filter="editForm" style="width: 90%;">
        <!-- <div class="layui-form-item " style="display: inline-block;">
          <label class="layui-form-label">渠道:</label>
          <div class="layui-input-inline">
            <select id="channelId" name="channelId" placeholder="请选择" lay-filter="channel">

            </select>
          </div>
        </div>
        <div class="layui-form-item " style="display: inline-block;">
          <label class="layui-form-label">销售顾问:</label>
          <div class="layui-input-inline">
            <input type="text" name="salesPerson" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item" style="display: inline-block;">
          <label class="layui-form-label">会员姓名:</label>
          <div class="layui-input-inline">
            <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item" style="display: inline-block;">
          <label class="layui-form-label">性别:</label>
          <div class="layui-input-inline">
            <select name="sex">
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item" style="display: inline-block;">
          <label class="layui-form-label">生日:</label>
          <div class="layui-input-inline">
            <input type="text" id="birth" readonly name="birth" placeholder="请输入" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item" style="display: inline-block;">
          <label class="layui-form-label">家长姓名:</label>
          <div class="layui-input-inline">
            <input type="text" name="parent_name" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item" style="display: inline-block;">
          <label class="layui-form-label">联系电话:</label>
          <div class="layui-input-inline">
            <input type="text" name="phone" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item" style="display: inline-block;">
          <label class="layui-form-label">会员状态:</label>
          <div class="layui-input-inline">
            <select id="statusId" name="statusId" lay-filter="member_status" placeholder="请选择">
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">备注:</label>
          <div class="layui-input-block">
            <textarea name="notes" placeholder="请输入" autocomplete="off" class="layui-textarea"></textarea>
          </div>
        </div> -->
        <div style="margin: 20px 20px;">
          <!-- <div style="margin:5px 0px;border-bottom: 1px solid #efefef;"></div> -->
          <div style="color: red;">注:正式学员需要填写的数据, 非正式会员无需填写。</div>
        </div>
        <div class="layui-form-item" style="display: inline-block;">
          <label class="layui-form-label">总课时:</label>
          <div class="layui-input-inline">
            <input id="courseHours" name="courseHours" lay-filter="member_status" placeholder="请输入" class="layui-input">
            </input>
          </div>
        </div>
        <div class="layui-form-item" style="display: inline-block;">
          <label class="layui-form-label">课程表:</label>
          <div class="layui-input-inline" style="width: 280px;">
            <button type="button" class="layui-btn" id="updateCourses" style="display: inline;">
              <i class="layui-icon">&#xe67c;</i>上传课程表
            </button>
            <input type="hidden" id="courseFile" name="courseFile" value="">
            <a style="display: none;padding: 9px 20px;" class="layui-btn" id="downloadCourses" href="">
              <i class="layui-icon">&#xe601;</i>下载课程表
            </a>
          </div>
        </div>
        <div style="margin:5px 0px;border-bottom: 1px solid #efefef;"></div>
        <div class="layui-row" style="margin-top: 20px;">
          <div class="layui-input-block">
            <button lay-submit lay-filter="submit" class="layui-btn layui-btn-normal">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
    </div>
    <!-- 编辑结束 -->
    <!--费用管理-->
    <div id="feePage" style="width: 800px;height: 650;display: none;">
      <table class="layui-hide" id="feeTable" lay-filter="feeTable"></table>
    </div>
    <div id="feeEditPage" style="width: 600px;height: 450;display: none;">
      <form class="layui-form layui-row" action="" lay-filter="feeEditForm" style="width: 90%;">
        <div class="layui-form-item ">
          <label class="layui-form-label">费用名称:</label>
          <div class="layui-input-block">
            <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item ">
          <label class="layui-form-label">金额:</label>
          <div class="layui-input-block">
            <input type="text" name="money" verify="number" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item ">
          <label class="layui-form-label">收费人员:</label>
          <div class="layui-input-block">
            <input type="text" name="tollman" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">备注:</label>
          <div class="layui-input-block">
            <textarea name="notes" placeholder="请输入" autocomplete="off" class="layui-textarea"></textarea>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button lay-submit lay-filter="feeSubmit" id="feeSubmit" class="layui-btn layui-btn-normal">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
    </div>
    <!--导入档案-->
    <div id="importPage" style="width:600px;height: 450;display: none;text-align: center;padding: 10px;">
      <textarea id="importContent" class="layui-textarea" style="width: 90%;height: 300px;"></textarea>
    </div>
    <!--课时管理-->
    <div id="hourPage" style="width: 800px;height: 800;display: none;padding: 10px;">
      <form class="layui-form layui-row" action="" lay-filter="hourEditForm" style="width: 90%;">
        <div class="layui-form-item" style="display: inline-block;">
          <label class="layui-form-label">日期:</label>
          <div class="layui-input-inline">
            <input type="text" name="atDate" id="atDate" verify="number" placeholder="请输入" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item" style="display: inline-block;">
          <label class="layui-form-label">课程:</label>
          <div class="layui-input-inline">
              <select type="text" name="courseName" id="courseName" lay-filter="courseName" placeholder="请选择" class="layui-select">
                <option value="听觉基础+视觉基础">听觉基础+视觉基础</option>
                <option value="听觉基础">听觉基础</option>
                <option value="听觉基础">视觉基础</option>
              </select>
          </div>
        </div>
        <div class="layui-form-item" style="display: inline-block;">
          <label class="layui-form-label">课时:</label>
          <div class="layui-input-inline">
            <select type="text" name="hour" id="hour" lay-filter="hour" verify="number" placeholder="请输入" class="layui-select">
              <option value="1">1课时</option>
              <option value="0.5">0.5课时</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item" style="display: inline-block;">
          <label class="layui-form-label">操作人:</label>
          <div class="layui-input-inline">
            <input type="text" name="operator" id="operator" verify="number" placeholder="请输入" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">备注:</label>
          <div class="layui-input-block">
            <input name="notes" placeholder="请输入" autocomplete="off" class="layui-input"></input>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button lay-submit lay-filter="hourEditForm" id="hourSubmit"
              class="layui-btn layui-btn-normal">登记课时</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
      <table class="layui-hide" id="hourTable" lay-filter="hourTable"></table>
    </div>
    <!--课时管理结束-->
  </div>
  <script src="./lib/layui.js" charset="utf-8"></script>
  <script src="./config.js"></script>
  <script type="text/html" id="tableOperation">
  <!-- <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="delete">
    删除
  </button> -->
  <button type="button" class="layui-btn layui-btn-sm layui-btn-success" lay-event="modify">
    课程/总课时
  </button>
  <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="hour">
    课时管理
  </button>
  <!-- <button type="button" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="fee">
    费用管理
  </button> -->
  <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="download">
    下载课程
  </button>
</script>
  <script type="text/html" id="feeOperation">
  <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="delete">
    删除
  </button>
  <button type="button" class="layui-btn layui-btn-sm layui-btn-success" lay-event="modify">
    修改
  </button>
</script>
  <script type="text/html" id="hourOperation">
  <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="delete">
    删除
  </button>
</script>
  <script type="text/html" id="toolbar">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="import">导入</button>
    <!-- <button class="layui-btn layui-btn-sm" lay-event="deletes">删除</button>     -->
  </div>
</script>
  <script>
    var currrowId = "";
    var memberId = "";
    var layerIndex = 0;
    function getQueryString(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return unescape(r[2]);
      }
      return null;
    }
    layui.use(['table', "form", "layer", "jquery", "laydate", "upload"], function () {
      var table = layui.table;
      var form = layui.form;
      var $ = layui.$;
      var laydate = layui.laydate;
      var layer = layui.layer;
      var upload = layui.upload;
      table.render({
        elem: '#mainTable'
        // ,toolbar: "#toolbar"
        , defaultToolbar: ['filter']
        , headers: { Authorization: "bearer " + getQueryString('token') }
        , request: { pageName: "pageIndex", limitName: "pageSize" }
        , parseData: function (res) {
          return { code: "0", msg: "ok", data: res.content, count: res.totalElements }
        }
        , page: true
        , url: requestUrl + '/service/focus-service/device/members'
        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        , cols: [[
          { type: 'numbers', width: 80, title: '序号', width: 80 }
          , { field: 'channel', title: '渠道' }
          , { field: 'salesPerson', title: '销售顾问' }
          , { field: 'member_no', title: '会员编号' }
          , { field: 'name', title: '会员姓名', }
          , { field: 'sex', title: '性别', }
          , { field: 'showAge', title: '年龄', }
          , { field: 'birth', title: '生日' }
          , { field: 'parent_name', title: '家长姓名' }
          , { field: 'phone', title: '联系电话' }
          , { field: 'member_status', title: '会员状态' }
          , { field: "courseHours", title: "总课时" }
          , { field: "remainHours", title: "剩余课时" }
          // , { field: 'money', title: '收费金额' }
          , { title: "操作", width: 300, templet: "#tableOperation" }
        ]]
      });
      table.render({
        elem: '#feeTable',
        toolbar: "#toolbar"
        , defaultToolbar: ['filter']
        , headers: { Authorization: "bearer " + getQueryString('token') }
        , request: { pageName: "pageIndex", limitName: "pageSize" }
        , parseData: function (res) {
          return { code: "0", msg: "ok", data: res.content, count: res.totalElements }
        }
        , page: true
        , url: requestUrl + '/service/focus-service/device/fees'
        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        , cols: [[
          { type: 'numbers', width: 80, title: '序号', width: 40 }
          , { field: 'name', title: '收费名称' }
          , { field: 'money', title: '收费金额' }
          , { field: 'feeDate', title: '收费日期', width: 170 }
          , { field: 'tollman', title: '收费人', width: 80 }
          , { field: 'notes', title: '备注', }
          , { title: "操作", width: 140, templet: "#feeOperation" }
        ]]
      });5
      table.render({
        elem: '#hourTable'
        //toolbar: "#toolbar"        
        , defaultToolbar: ['filter']
        , headers: { Authorization: "bearer " + getQueryString('token') }
        , request: { pageName: "pageIndex", limitName: "pageSize" }
        , parseData: function (res) {
          return { code: "0", msg: "ok", data: res.content, count: res.totalElements }
        }
        , page: true
        , url: requestUrl + '/service/focus-service/courseHour/courseHours'
        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        , cols: [[
          { type: 'numbers', width: 80, title: '序号', width: 40 }
          , { field: 'atDate', title: '日期', width: 120 }
          , {field:"courseName",title:"课程",width:180}
          , { field: 'hour', title: '登记课时', width: 100 }
          , { field: 'operator', title: '操作人', width: 100 }
          , { field: 'createDate', title: '操作时间', width: 180 }
          , { field: 'notes', title: '备注', }
          , { title: "操作",fixed:"right", width: 140, templet: "#hourOperation" }
        ]]
      });
      table.on('tool(mainTable)', function (obj) {
        switch (obj.event) {
          case "delete":
            layer.confirm("确认删除吗?", function () {
              request($, "delete", requestUrl + '/service/focus-service/device/member?ids=' + obj.data.id, {}, function (res) {
                layer.closeAll();
                table.reload("mainTable");
              })
            })
            break;
          case "modify":
            currrowId = obj.data.id;
            form.val("editForm", obj.data);
            if (obj.data.courseFile) {
              $("#downloadCourses").attr("href", requestUrl + "/service/formcenter-service/upload/publicApi/file/" + obj.data.courseFile);
              $("#downloadCourses").css("display", "inline");
            } else {
              $("#downloadCourses").css("display", "none");
            }
            layer.open({
              type: 1,
              skin: "layui-layer-rim", //加上边框
              content: $('#editPage')
            });
            break;
          case "fee":
            layer.open({
              type: 1,
              area: ['auto', '500px'],
              skin: "layui-layer-rim", //加上边框
              content: $('#feePage'),
              success: function (layero, index) {
                memberId = obj.data.id;
                table.reload("feeTable", { where: { memberId: obj.data.id } });
              },
            });
            break;
          case "hour":
            layer.open({
              type: 1,
              area: ['auto', '700px'],
              skin: "layui-layer-rim", //加上边框
              content: $('#hourPage'),
              success: function (layero, index) {
                memberId = obj.data.id;
                var today = new Date();
                $("#atDate").val(today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate());
                table.reload("hourTable", { where: { memberId: obj.data.id } });
              },
            })
            break;
          case "download":
            layer.open({
              type: 2,
              skin: "layui-layer-rim", //加上边框
              content: "./downloadCourse.html?id=" + obj.data.id+"&token="+getQueryString('token'),
              area: ["600px", "500px"],
              title: "下载课程"
            });
            break;
        }
      });
      table.on("toolbar(mainTable)", function (obj) {
        switch (obj.event) {
          case "add":
            currrowId = ""
            form.val("editForm", {});
            layer.open({
              type: 1,
              skin: "layui-layer-rim", //加上边框
              content: $('#editPage'),
            });
            break;
          case "import":
            $("#importContent").val("");
            layer.open({
              type: 1,
              title: "导入数据",
              skin: "layui-layer-rim", //加上边框
              content: $('#importPage'),
              btn: ["确定"],
              btn1: function (index, layero, that) {
                layer.load();
                request($, "post", requestUrl + '/service/focus-service/device/importMembers', { text: $("#importContent").val() }, function (res) {
                  layer.closeAll();
                  table.reload("mainTable");
                  layer.msg("导入成功");
                })
              }
            });
            break;
        }
      })
      table.on("toolbar(feeTable)", function (obj) {
        switch (obj.event) {
          case "add":
            currrowId = ""
            form.val("feeEditForm", {});
            layer.open({
              type: 1,
              skin: "layui-layer-rim", //加上边框
              content: $('#feeEditPage'),
              success: function (layero, index) {
                layerIndex = index
              }
            });
            break;
            break;
        }
      });
      table.on("tool(feeTable)", function (obj) {
        switch (obj.event) {
          case "modify":
            currrowId = obj.data.id;
            form.val("feeEditForm", obj.data);
            layer.open({
              type: 1,
              skin: "layui-layer-rim", //加上边框
              content: $('#feeEditPage'),
              success: function (layero, index) {
                layerIndex = index
              }
            });
            break;
          case "delete":
            layer.confirm("确认删除吗?", function (index) {
              request($, "delete", requestUrl + '/service/focus-service/device/fee?ids=' + obj.data.id, {}, function (res) {
                layer.close(index);
                table.reload("feeTable");
              })
            })
            break;
        }
      });
      table.on("tool(hourTable)", function (obj) {
        switch (obj.event) {
          case "delete":
            layer.confirm("确认删除吗?", function (index) {
              request($, "delete", requestUrl + '/service/focus-service/courseHour/courseHour?ids=' + obj.data.id, {}, function (res) {
                layer.close(index);
                table.reload("hourTable");
              })
            })
            break;
        }
      });
      laydate.render({ elem: "#birth", type: "date" });
      laydate.render({ elem: "#atDate", type: "date" });
      form.on("submit(search)", function (data) {
        table.reload("mainTable", { where: data.field });
        return false;
      })
      form.on("submit(submit)", function (data) {
        if (currrowId) {
          data.field.id = currrowId;
          request($, "put", requestUrl + '/service/focus-service/device/member', data.field, function (res) {
            layer.closeAll();
            table.reload("mainTable");
          })
        }
        else {
          request($, "post", requestUrl + '/service/focus-service/device/member', data.field, function (res) {
            layer.closeAll();
            table.reload("mainTable");
          })
        }
        return false;
      })
      form.on("submit(feeSubmit)", function (data) {
        data.field.memberId = memberId;
        if (currrowId) {
          data.field.id = currrowId;
          request($, "put", requestUrl + '/service/focus-service/device/fee', data.field, function (res) {
            layer.close(layerIndex);
            table.reload("feeTable");
            table.reload("mainTable");
          })
        }
        else {
          request($, "post", requestUrl + '/service/focus-service/device/fee', data.field, function (res) {
            layer.close(layerIndex);
            table.reload("feeTable");
            table.reload("mainTable");
          })
        }
        return false;
      })
      form.on("submit(hourEditForm)", function (data) {
        data.field.memberId = memberId;
        request($, "post", requestUrl + '/service/focus-service/courseHour/courseHour', data.field, function (res) {
          table.reload("hourTable");
          table.reload("mainTable");
        })
        return false;
      })
      form.on('select(courseName)', function(data){
        if(data.value=="听觉基础"||data.value=="视觉基础")
          form.val("hourEditForm", {hour:"0.5"});
        else form.val("hourEditForm", {hour:"1"});
      });
      upload.render({
        elem: '#updateCourses' //绑定元素
        , url: requestUrl + '/service/formcenter-service/upload/file' //上传接口
        , headers: { Authorization: "bearer " + getQueryString('token') }
        , field: "files"
        , accept: "file"
        , exts: "xls|xlsx"
        , done: function (res) {
          $("#courseFile").val(res[0].id + res[0].type);
        }
        , error: function () {
          //请求异常回调
        }
      });
      $(function () {
        request($, "get", requestUrl + '/service/focus-service/member/channels', null, function (res) {
          var html = "";
          for (var i = 0; i < res.length; i++) {
            html += '<option value="' + res[i].id + '">' + res[i].name + '</option>';
          }
          $("#channelId").append(html);
          form.render();
        });
        request($, "get", requestUrl + '/service/focus-service/member/statuses', null, function (res) {
          var html = "";
          for (var i = 0; i < res.length; i++) {
            html += '<option value="' + res[i].id + '">' + res[i].name + '</option>';
          }
          $("#statusId").append(html);
          form.render();
        });
      })

    });
    function request($, type, url, data, success) {
      $.ajax({
        url: url,
        data: data,
        type: type,
        headers: { Authorization: "bearer " + getQueryString('token') },
        success: function (res) {
          success(res)
        }
      })
    }    
  </script>
</body>
<style>
  .layui-form-item {
    clear: inherit;
  }
</style>

</html>